import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('你好flutter')),
        body: ListView(
          children: [
            Container(
              height: 300,
              color: Colors.black12,
              // TODO Row 横着排列 宽度自适应
              child: Row(
                // 相当于justify-content 水平排列方式
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                // 相当于align-items,需要外部容器有高度
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  IconContainer(Icons.home, color: Colors.red),
                  IconContainer(Icons.ac_unit_sharp, color: Colors.teal),
                  // IconContainer(Icons.settings, color: Colors.orange),
                  // IconContainer(Icons.search, color: Colors.blue),
                  // IconContainer(Icons.local_activity_sharp, color: Colors.green),
                ],
              ),
            ),
            Container(
              height: 300,
              width: double.infinity,
              color: Colors.black,
              // TODO 竖着排列 ,高度自适应
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                // 需要外部容器有高度
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  IconContainer(Icons.home, color: Colors.deepPurple),
                  IconContainer(Icons.ac_unit_sharp, color: Colors.teal),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;
  IconContainer(this.icon, {super.key, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: Colors.amber[200],
      width: 120,
      height: 120,
      child: Icon(
        icon,
        color: color,
        size: 50,
      ),
    );
  }
}
